
//获取每个大li
//一级标题被包含在大li里面
var opts_ = $('.tree .option');

//遍历每个大li
//一级标题被包含在大li里面
for (let i = 0; i < opts_.length; i++) {

  //给每个一级菜单的盒子绑定点击事件
  opts_.eq(i).click(() => {

    //
    //children() 方法返回返回被选元素的所有直接子元素。
    //如果被点击的一级菜单li的子元素高度 == 0，则执行展开代码
    if (opts_.eq(i).children('.tree-two').css('height') == '0px') {

      //获取二级菜单ul的li
      let items = opts_.eq(i).children('.tree-two').children('.item');
      let h = 0;

      //遍历每个item
      for (let j = 0; j < items.length; j++) {
        h += items.eq(j).height()
        // 点击二级列表添加样式
        items.eq(j).click((event) => {
          items.eq(j).addClass('active').siblings().removeClass('active')
          //该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
          event.stopPropagation();
        })
      }
      // 展示当前二级列表
      //animate() 方法执行 CSS 属性集的自定义动画。
      //该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
      //只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。
      //注释：使用 "+=" 或 "-=" 来创建相对动画（relative animations）。
      opts_.eq(i).children('.tree-two').animate({
        height: h
      }, 200)

      //给当前
      opts_.eq(i)
        .children('.tree-two')
        .children('.item').eq(0)
        .addClass('active')
        .siblings()
        .removeClass('active')

      // 隐藏其他二级列表
      opts_.eq(i).siblings().children('.tree-two').animate({
        height: '0px'
      }, 200)
      // 设置当前样式
      opts_.eq(i).addClass('active').siblings().removeClass('active')
      // 修改箭头
      opts_.eq(i).children('p').children('.iconfont').removeClass('icon-xia').addClass('icon-shang')
      opts_.eq(i).siblings().children('p').children('.iconfont').removeClass('icon-shang').addClass('icon-xia')
    } else {
      // 展示当前二级列表
      opts_.eq(i).children('.tree-two').animate({
        height: '0px'
      }, 300)
      // 修改箭头
      opts_.eq(i).children('p').children('.iconfont').removeClass('icon-shang').addClass('icon-xia')
    }
  })
}